import React, { Component } from 'react'

// react-loadable原理
// loader要加载模块的形参
const Loadable = ({loader, loading: Loading}) => {
    // 运用到高阶组件的思想，说直白一点就是闭包
   return class loadable extends Component {
        state = {
            loadComponent: null
        }
        // 当组件挂载完毕后，如果loading加载成功说明，该模块被引入内存
        componentDidMount() {
            loader().then(response=> {
                // 将加载好的模块赋值给state中loadComponent
                this.setState({loadComponent: response.default})
            })
        }
        
        render() {
            const {LoadedComponent} = this.state
            return (
                // 如果loadComponent有值，就将模块渲染，如果没有说明模块太大或者网速慢，还没有请求回来
                // 因为loader()返回的是一个promise所以是个异步任务，在异步任务还没有完成的时候，主任务中的
                // Loading组件会一直出现知道，模块加载完成
                    LoadedComponent ? 
                    <LoadedComponent /> :
                    <Loading />
            )
        }
    }
}

export default Loadable
